<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: hucc
 * @LastEditTime: 2021-09-23 20:08:12
-->
<template>
  <!-- 2.创建容器 容纳图表 -->
  <div ref="root" style="height: 150px"></div>
</template>
<script>
import { Bar } from "@antv/g2plot";
export default {
  //1.引入组件
  data() {},
  mounted() {
    this.initCharts();
  },
  methods: {
    //封装图表方法
    initCharts() {
      //3.创建实例方法
      let bar = new Bar(this.$refs["root"], {
        data: [
          {
            label: "Mon.",
            type: "series1",
            value: 2800,
          },
          {
            label: "Mon.",
            type: "series2",
            value: 2260,
          },
          {
            label: "Tues.",
            type: "series1",
            value: 1800,
          },
          {
            label: "Tues.",
            type: "series2",
            value: 1300,
          },
          {
            label: "Wed.",
            type: "series1",
            value: 950,
          },
          {
            label: "Wed.",
            type: "series2",
            value: 900,
          },
          {
            label: "Thur.",
            type: "series1",
            value: 500,
          },
          {
            label: "Thur.",
            type: "series2",
            value: 390,
          },
          {
            label: "Fri.",
            type: "series1",
            value: 170,
          },
          {
            label: "Fri.",
            type: "series2",
            value: 100,
          },
        ],
        isGroup: true,
        xField: "value",
        yField: "label",
        seriesField: "type",
        barStyle: { radius: [2, 2, 0, 0] },
        label: {
          // 可手动配置 label 数据标签位置
          position: "right", // 'left', 'middle', 'right'
          offset: 4,
        },
      });
      //4.渲染
      bar.render();
    },
  },
};
</script>